01_2_2 円環と線

プロットした点から平面までの距離をビジュアライズしリズムを生み出します。

サンプルコード：sketch01_2_2

https://gyazo.com/d0697c0bc77eb70cf4566ff86937043f

平面と点の間に線を引く

X-Z平面からプロットした座標まで垂直に線を引きます。

code:sketch01_2_2.pde

void draw() {

...

for(int i=0; i<verts.size(); i++){

strokeWeight(plot_size);

stroke( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha);

//X-Z平面からプロットした座標まで垂直に線を引く

line(verts.get(i).x, 0, verts.get(i).z, verts.get(i).x, verts.get(i).y, verts.get(i).z);

}

...

}

Visualization

https://gyazo.com/b70f7640cbab9ea749b49189b88884ec

https://gyazo.com/373310e7e704dac515333b985665ef0e

色を補間した線を引く

beginShape( LINES )を使うことで、2つの色を補間した色で線を引くことができます。具体的にコードで比較してみましょう。

まず、line( ) では1つの色しか指定できません。

stroke(255,100,0);

line(-100,-15,0, 100,-15,0);

beginShape( LINES )では始点と終点の色を別々に指定できます。

beginShape(LINES);

stroke(255,100,0); //始点の色

vertex(-100,15,0); //始点の座標

stroke(0,100,255); //終点の色

vertex(100,15,0); //終点の座標

endShape();

結果は次のようになります。

sketch01_2_2_example

https://gyazo.com/82f9e9767095c60ca9da5fb1636a8a9b

図1　上がline( ) で描画した線。下がbeginShape( LINES )で描画した線。始点と終点に別々の色を指定すると、補間した色で線を描画できます。

これを応用して、平面に近づくほど線を透明にすることもできます。

code:sketch01_2_2_1.pde

void draw(){

...

strokeWeight(plot_size);

beginShape(LINES);

for(int i=0; i<verts.size(); i++){

stroke( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha); //プロットした座標（始点）

vertex(verts.get(i).x, verts.get(i).y, verts.get(i).z); //始点の色

stroke( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 5*plot_alpha); //平面上の座標（終点）

vertex(verts.get(i).x, 0, verts.get(i).z); //終点の色

}

endShape();

...

}

Visualization

https://gyazo.com/f0914d5a5384abe3646416d12c1c2a31